<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="开始日" name="start" id="start"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="截止日" name="end" id="end"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="contrller">
                                <option>支付方式</option>
                                <option>支付宝</option>
                                <option>微信</option>
                                <option>货到付款</option></select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="contrller">
                                <option value="">订单状态</option>
                                <option value="0">待确认</option>
                                <option value="1">已确认</option>
                                <option value="2">已收货</option>
                                <option value="3">已取消</option>
                                <option value="4">已完成</option>
                                <option value="5">已作废</option></select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入订单号" autocomplete="off" class="layui-input"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">
                    <div class="layui-btn-group demoTable">
                        <button class="layui-btn" data-type="addDemo"><i class="layui-icon">&#xe654;</i>添加</button>
                        <button class="layui-btn" data-type="getCheckData"><i class="layui-icon">&#xe640;</i>批量删除</button>
                    </div>
                </div>
                <div class="layui-card-body ">
                    <table id="${tableClass.shortClassName?uncap_first}Table" lay-filter="${tableClass.shortClassName?uncap_first}Table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="${tableClass.shortClassName?uncap_first}Tablebar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe615;</i></a>
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
<script>
    layui.use(['table', 'form'], function() {
        let table = layui.table,
            $ = layui.jquery,
            form = layui.form;
        //表格渲染
        var tableIns = table.render({
            elem: '#${tableClass.shortClassName?uncap_first}Table'
            ,id: '${tableClass.shortClassName?uncap_first}Table'
            //,height: 312
            ,url: './${tableClass.shortClassName?uncap_first}/getPageList' //数据接口
            ,method: 'post'
            ,contentType: 'application/json'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            ,response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            ,page: true //开启分页
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'},
                <#list tableClass.pkFields as field>
                {field: '${field.fieldName}', title: '<#if (field.remark)??>${field.remark}<#else>${field.fieldName}</#if>', width:80, sort: true},
                </#list>
                <#list tableClass.baseFields as field>
                {field: '${field.fieldName}', title: '<#if (field.remark)??>${field.remark}<#else>${field.fieldName}</#if>', width:100}<#sep>,
                </#list>

                ,{fixed: 'right', width:180, align:'center', toolbar: '#${tableClass.shortClassName?uncap_first}Tablebar'}
            ]]
        });

        //监听工具条
        table.on('tool(${tableClass.shortClassName?uncap_first}Table)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    //loading层
                    var loadIndex = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url:"./${tableClass.shortClassName?uncap_first}/delete/"+ data.<#list tableClass.pkFields as field>${field.fieldName}</#list>,
                        type:"post",
                        dataType:"json",
                        headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
                        success:function(rs){
                            layer.close(loadIndex);
                            if (rs.success) {
                                layer.alert('删除成功');
                                table.reload('${tableClass.shortClassName?uncap_first}Table', null, null);
                            } else {
                                layer.alert('删除失败',rs.message);
                            }
                        },
                        error:function(data){
                            layer.close(loadIndex)
                            layer.alert(JSON.stringify(data), {
                                title: data
                            });
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                xadmin.open('编辑','./${tableClass.shortClassName?uncap_first}-edit.html?id='+data.id,600,400);
            } else if(obj.event === 'detail'){
                layer.alert(JSON.stringify(data), {
                    title: '功能待完善......'
                });
            }
        });

        //监听搜索表单
        form.on('submit(sreach)', function(data){
            //搜索，重新加载表格  //data.field 为表单内容
            tableIns.reload({
                where: data.field
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
         });

        //批量删除
        var active = {
            getCheckData: function(){ //批量删除
                var checkStatus = table.checkStatus('${tableClass.shortClassName?uncap_first}Table');
                var data = checkStatus.data;
                if (!data || data.length < 1) {
                    layer.alert("请选择待删除行。");
                } else {
                    layer.confirm('真的删除行么', function(index){
                        var ids = "";
                        for (var i = 0; i < data.length; i++) {
                            ids = ids + data[i].id + ",";
                        }
                        //loading层
                        var loadIndex = layer.load(1, {
                            shade: [0.1,'#fff'] //0.1透明度的白色背景
                        });
                        $.ajax({
                            url:"./${tableClass.shortClassName?uncap_first}/delByIds/",
                            type:"post",
                            data: {'ids':ids},
                            success:function(rs){
                                layer.close(loadIndex);
                                if (rs.success) {
                                    layer.alert('删除成功');
                                    table.reload('${tableClass.shortClassName?uncap_first}Table', null, null);
                                } else {
                                    layer.alert('删除失败',rs.message);
                                }
                            },
                            error:function(data){
                                layer.close(loadIndex)
                                layer.alert(JSON.stringify(data), {
                                    title: data
                                });
                            }
                        });
                        layer.close(index);
                    });
                }
            }
            ,addDemo: function(){ //
                xadmin.open('新增','./${tableClass.shortClassName?uncap_first}-add.html',600,400);
            }
        };
        //批量删除调用
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</html>